<template>
	<!-- 上传视频或者图片 -->
	<view class="up-page">
		<!--图片-->
		<view class="show-box" v-for="(item,index) in imageList" :key="index">
			<image class="full" :src="item" :data-src="image" @tap="previewImage(item)">
			</image>
			<view class="delect-icon" @tap="delect(index)">
				<image class="full" :src="clearIcon" mode=""></image>
				<!--图片或者视频上传成功了，点击右上角叉号-->
			</view>
		</view>
		<!--视频-->
		<view class="show-box" v-for="(item1, index1) in videoList" :key="index1">
			<video class="full" :src="item1"></video>
			<view  class="delect-icon" @tap="delectVideo(index1)">
				<image class="full" :src="clearIcon" mode=""></image>
			</view>
		</view>
		<view v-if="VideoOfImagesShow" @tap="chooseVideoImage" class="box-mode">
			<!-- <image class="full" :src="selectfile" mode=""></image> -->
			<view class="add_img_box flex AI-center JC-center">
				<image class="img" :src="selectfile" mode="widthFix"></image>
			</view>
			<!-- 上传图标 懒得写，整个的图 -->
		</view>
	</view>
 
</template>
<script>
	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	];
	const app =getApp()
	export default {
		data() {
			return {
				image:"",
				// 图标
				clearIcon: '../../static/pubImgs/close.png',
				selectfile: '../../static/pubImgs/add_file_icon.png',
				VideoOfImagesShow: true, // 页面图片或视频数量超出后，拍照按钮隐藏
				imageList: [], //存放图片的地址
				videoList: [], //视频存放的地址
				sourceType: ['拍摄', '相册', '拍摄或相册'],
				sourceTypeIndex: 2,
				cameraList: [{
					value: 'back',
					name: '后置摄像头',
					checked: 'true'
				}, {
					value: 'front',
					name: '前置摄像头'
				}],
				cameraIndex: 0, //上传视频时的数量
				maxCount:6, //图片和视频允许上传的总数
				type: null, // 0是图片 1是视频
				files: {
					imgs:[],
					video:[]
				} //文件存放
			}
		},
		onUnload() {
			(this.imageList = []), (this.sourceTypeIndex = 2), (this.sourceType = ['拍摄', '相册', '拍摄或相册']);
		},
		watch:{
			files:{
				handler(val){
					this.$emit('getVal',this.files)
				},
				deep: true
			},
			imageList:{
				handler(){
					this.typeStatus();
					// if(this.imageList.length == 0){
					// 	this.type = null
					// }
				},
				deep: true
			},
			videoList:{
				handler(){
					this.typeStatus();
					// if(this.videoList.length == 0){
					// 	this.type = null
					// }
				},
				deep: true
			}
		},
		methods: {
			//点击上传图片或视频
			chooseVideoImage() {
				console.log('chooseVideoImage',this.type);
				if(this.type == 0){
					// 图片
					this.chooseImages();
					
				}else if(this.type == 1){
					// 视频
					this.chooseVideo();
				}else{
					uni.showActionSheet({
						title: '选择上传类型',
						itemList: ['图片', '视频'],
						success: res => {
							console.log('showActionSheet');
							if (res.tapIndex == 0) {
								this.type = 0;
								this.chooseImages();
							} else {
								this.type = 1;
								this.chooseVideo();
							}
						},
						complete: res=>{
							this.typeStatus();
						}
					});
				}
				
			},
			//上传图片
			chooseImages() {
				uni.chooseImage({
					count: 9, //允许选择的数量
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: res => {
						this.imageList = this.imageList.concat(res.tempFilePaths);
						console.log('res',res.tempFilePaths)
						if (this.imageList.length >= 9) {
							this.VideoOfImagesShow = false; //图片上传数量和count一样时，让点击拍照按钮消失
						}
						// if (this.imageList.length+this.videoList.length == this.maxCount) {
						// 	this.VideoOfImagesShow = false; //图片上传数量和count一样时，让点击拍照按钮消失
						// }
						// 上传服务器
						this.uploadFile(res.tempFilePaths)
					}
				})
			},
			//上传视频
			chooseVideo(index) {
				uni.chooseVideo({
					maxDuration: 60, //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒
					count: 1,
					camera: this.cameraList[this.cameraIndex].value, //'front'、'back'，默认'back'
					sourceType: sourceType[this.sourceTypeIndex],
					success: res => {
						console.log(11,res);
						this.videoList = this.videoList.concat(res.tempFilePath);
						if (this.videoList.length >= 1) {
							this.VideoOfImagesShow = false; //图片上传数量和count一样时，让点击拍照按钮消失
						}
						// if (this.imageList.length+this.videoList.length == this.maxCount) {
						// 	this.VideoOfImagesShow = false;
						// }
						// console.log(this.videoList);
						// this.getVal(this.videoList)
						// 上传服务器 （待修改）
						this.uploadFile(res.tempFilePath)
					}
				})
			},
			//预览图片
			previewImage: function(e) {
				// console.log(e)
				uni.previewImage({
					current: e,
					urls: this.imageList
				});
			},
			// 删除图片
			delect(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片',
					success: res => {
						if (res.confirm) {
							this.imageList.splice(index, 1);
							this.files.imgs.splice(index, 1);
							
						}
						// if(this.imageList.length == 0){
						// 	this.type = null;
						// }
						if (this.imageList.length  >= 9) {
							this.VideoOfImagesShow = false;
						} else {
							this.VideoOfImagesShow = true;
						}
						// 原
						// if (this.imageList.length+this.videoList.length  == this.maxCount) {
						// 	this.VideoOfImagesShow = false;
						// } else {
						// 	this.VideoOfImagesShow = true;
						// }
					}
				});
			},
			// 删除视频
			delectVideo(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除此视频',
					success: res => {
						if (res.confirm) {
							this.videoList.splice(index, 1);
							this.files.video.splice(index, 1);
						}
						// if(this.videoList.length == 0){
						// 	this.type = null;
						// }
						// 数量
						if (this.videoList.length  >= 1) {
							this.VideoOfImagesShow = false;
						} else {
							this.VideoOfImagesShow = true;
						}
						// 原
						// if (this.imageList.length+this.videoList.length  == this.maxCount) {
						// 	this.VideoOfImagesShow = false;
						// } else {
						// 	this.VideoOfImagesShow = true;
						// }
					}
				});
			},
			uploadFile(file){
				const that = this;
				// console.log(222222,file)
				if(process.env.NODE_ENV === 'development'){
				    var all_url = '';
				}else{
					var all_url = app.globalData.publicUrl;
				}
				var all_url = app.globalData.publicUrl;
				if(Array.isArray(file)){
					console.log(1111111);
					file.map(item=>{
						uni.uploadFile({
							url: all_url +'/api/resources/Upload', 
							filePath: item,
							header: {
								'token': uni.getStorageSync('token'),
							},
							name: 'file',
							success: (uploadFileRes) => {
								console.log(22,uploadFileRes.data);
								let file = JSON.parse(uploadFileRes.data);
								if(file.code == 20000){
									if(that.type == 0){
										// 0是图片 1是视频
										that.files.imgs.push(file.url);
										// that.files.imgs = file.url;
									}else{
										// that.files.video = file.url;
										that.files.video.push(file.url);
									}
								}else{
									// uni.$u.toast(file.message)
								}
								uni.$u.toast(file.message)
								
							},
							fail:(e)=>{
								console.log(123,e)
							}
						});
					})
				}else{
					console.log(2222,file);
					// 一张图或者一个视频
					// file.map(item=>{
						uni.uploadFile({
							url: all_url +'/api/resources/Upload', 
							filePath: file,
							header: {
								'token': uni.getStorageSync('token'),
							},
							name: 'file',
							success: (uploadFileRes) => {
								console.log(1112111,uploadFileRes.data);
								let file = JSON.parse(uploadFileRes.data);
								if(file.code == 20000){
									if(that.type == 0){
										// 0是图片 1是视频
										that.files.imgs.push(file.url);
									}else{
										that.files.video.push(file.url);
									}
								}else{
									// 未成功
									// uni.$u.toast(file.message)
								}
								uni.$u.toast(file.message)
								
							},
							fail:(e)=>{
								console.log(123,e)
							}
						});
					// })
				}
				
				
			},
			getVal(val){
				let obj = {
					val,
					type:this.type
				}
				this.$emit('getVal',obj)
			},
			// 如果图片视频都为空则重新选择上传类型
			typeStatus(){
				console.log('type',this.imageList.length,this.videoList.length);
				if(this.imageList.length == 0 && this.videoList.length == 0){
					// console.log(2222222222222222,'type',this.type);
					this.type = null
				}else if(this.imageList.length > 0){
					this.type = 0
				}else if(this.videoList.length > 0){
					this.type = 1
				}
			}
		}
	}
</script>
<style lang="scss">
	/* 统一上传后显示的盒子宽高比 */
	.box-mode {
		width: 27vw;
		height: 27vw;
		border-radius: 8rpx;
		// overflow: hidden;
	}
	.add_img_box{
		width: calc(100% - 4rpx);
		height: calc(100% - 4rpx);
		border: 2rpx dashed #CCCCCC;
		border-radius: 8rpx;
		image{
			width: 50%;
		}
	}
	
	.full {
		width: 100%;
		height: 100%;
	}
 
	.up-page {
		display: flex;
		flex-wrap: wrap;
		display: flex;
		width: 100%;
		.show-box:nth-child(3n){
			margin-right: 0;
		}
		.show-box {
			position: relative;
			margin-bottom:4vw;
			margin-right: 4vw;
			@extend .box-mode;
 
			.delect-icon {
				height: 40rpx;
				width: 40rpx;
				position: absolute;
				right: -20rpx;
				top: -20rpx;
				z-index: 200;
			}
		}
	}
 
</style>
